<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图模式</title>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "7d554d01ccbb43d85259d96175af91cb",
        }
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
        AMapLoader.load({
            key: "68f7d284ec39ccaf7880b0d41926657e",       // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",                 // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        }).then((AMap) => {
            const map = new AMap.Map('container', {
                zoom: 10,  //设置地图显示的缩放级别
                center: [104.065751, 30.657453],  //设置地图中心点坐标
                viewMode: '2D',  //设置地图模式
                position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '成都'
            });
        }).catch((e) => {
            console.error(e);  //加载错误提示
        });   
    </script>
</head>

<body>
    <!-- 地图 -->
    <div class="map">
        <!-- 地图 -->
        <div id="container"></div>
        <!-- 返回按钮 -->
        <a href="exercising.html" class="iconfont icon-anniu_jiantouxiangzuo_o"></a>
    </div>

    <!-- 定位图标 -->
    <span class="iconfont icon-dingwei"></span>

    <!-- 运动数据 -->
    <div class="data">
        <!-- 户外跑 -->
        <p>地图模式</p>

        <!-- 配速、用时、千卡 -->
        <div class="datanum">
            <!-- 配速 -->
            <div>
                <span>配速</span>
                <span>99'99</span>
            </div>
            <!-- 用时 -->
            <div>
                <span>用时</span>
                <span>XX:XX:XX</span>
            </div>
            <!-- 千卡 -->
            <div>
                <span>距离(km)</span>
                <span>99.99</span>
            </div>
        </div>
    </div>
</body>

</html>